import React from "react";
import { ClassifyBox } from "./Classify.style";
import Scroll from "../../../baseUI/scroll";

const Classify = (props) => {
  const { classifyData } = props;

  return (
    <>
      <Scroll direction={"horizental"} refresh={true}>
        <ClassifyBox>
          {classifyData.map((item, index) => {
            return (
              <li className="classify_item" key={index}>
                <div className="classify_icon">
                  <svg className="icon" aria-hidden="true">
                    <use xlinkHref={item.classifyData_icon_name}></use>
                  </svg>
                </div>
                <span className="classify_text">
                  {item.classifyData_title}
                </span>
              </li>
            );
          })}
         </ClassifyBox>
      </Scroll>
      </>
  );
};

export default Classify;
